<template>
    <section class="main">
        <div class="title">
            <span>基本信息</span>
            <div>
                <el-button icon="el-icon-refresh"></el-button>
            </div>
        </div>
        <div class="container container1">
            <div class="itemBox">
                <div class="line"><div>商户名</div><div>{{merchantinfo.merchantName}}</div></div>
                <div class="line"><div>商户号</div><div>{{merchantinfo.merchantNo}}</div></div>
                <div class="line"><div>商户简称</div><div>{{merchantinfo.merchantShortName}}</div></div>
                <div class="line"><div>注册名称</div><div>{{merchantinfo.merchantBusinessName}}</div></div>
                <div class="line"><div>商户地址</div><div>{{merchantinfo.merchantAddress}}</div></div>
                <div class="line" v-if="merchantinfo.businessLicence"><div>营业执照号</div><div>{{merchantinfo.businessLicence}}</div></div>
            </div>
            <div class="itemBox">
                <div class="line"><div>商户负责人</div><div>{{merchantinfo.contactName}}</div></div>
                <div class="line"><div>负责人电话</div><div>{{merchantinfo.contactPhone}}</div></div>
                <div class="line"><div>负责人邮箱</div><div>{{merchantinfo.contactEmail}}</div></div>
                <div class="line"><div>客服电话</div><div>{{merchantinfo.servicePhone}}</div></div>
                <div class="line"><div>入网商户类型</div>
                    <div v-if='merchantinfo.merchantType == 1'>企业</div>
                    <div v-if='merchantinfo.merchantType == 2'>个体工商户</div>
                    <div v-if='merchantinfo.merchantType == 3'>自然人商户</div>
                </div>
                <div class="line" v-if="merchantinfo.businessLicenceExpire"><div>执照有效期</div><div>{{merchantinfo.businessLicenceExpire}}</div></div>
                
                
            </div>
            <div class="itemBox">
                <div class="line"><div>一级服务商</div><div>{{merchantinfo.agent1Name}}</div></div>
                <div class="line"><div>二级服务商</div><div>{{merchantinfo.agent2Name}}</div></div>
                <div class="line"><div>业态</div><div>{{merchantinfo.bdName}}</div></div>
                <div class="line"><div>所属行业</div><div>{{merchantinfo.merchantMccName}}</div></div>
                <div class="line" v-if="merchantinfo.licenceType"><div>入网证件类型</div>
                    <div v-if="merchantinfo.licenceType == 0">营业执照</div>
                    <div v-if="merchantinfo.licenceType == 1">三证合一营业执照</div>
                </div>
            </div>
        </div>
        <!-- 结算信息 -->
        <div class="title">
            <span>结算信息</span>
            <div>
                <el-button icon="el-icon-refresh"></el-button>
            </div>
        </div>
        <div class="container container1">
            <div class="itemBox">
                <div class="line"><div>结算类型</div><div>{{merchantinfo.merchantTypeName}}</div></div>
                <div class="line"><div>开户名</div><div>{{merchantinfo.accountCardName}}</div></div>
                <div class="line"><div>开户支行</div><div>{{merchantinfo.accountBankName}}</div></div>
            </div>
            <div class="itemBox">
                <div class="line"><div>账户类型</div><div>{{merchantinfo.accountTypeName}}</div></div>
                <div class="line"><div>开户证件号</div><div>{{merchantinfo.principalCertNo}}</div></div>
                <div class="line"><div>费率</div><div>{{merchantinfo.rate/10}}‰</div></div>
            </div>
             <div class="itemBox">
                <div class="line"><div>银行预留手机号</div><div>{{merchantinfo.accountPhone}}</div></div>
                <div class="line"><div>开户账号</div><div>{{merchantinfo.accountCardNum}}</div></div>
            </div>
        </div>
         <!-- 附件 -->
        <div class="title">
            <span>附件</span>
            <div>
                <el-button icon="el-icon-refresh"></el-button>
            </div>
        </div>
        <div class="container container1">
            <div class="attachmentitem" v-if='uploadfile.pIdcardA'>
                <div><img  :src="uploadfile.pIdcardA" alt=""></div>
                <div>身份证正面</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pIdcardB'>
                <div><img  :src="uploadfile.pIdcardB" alt=""></div>
                <div>身份证反面</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pBankIdcardA'>
                <div><img  :src="uploadfile.pBankIdcardA" alt=""></div>
                <div>对私账户身份证正面照片</div>
            </div>
             <div class="attachmentitem" v-if='uploadfile.pBankIdcardB'>
                <div><img  :src="uploadfile.pBankIdcardB" alt=""></div>
                <div>对私账户身份证反面照片</div>
            </div>
            <div class="attachmentitem"  v-if='uploadfile.pBankcardA'>
                <div><img :src="uploadfile.pBankcardA" alt=""></div>
                <div>银行卡正面</div>
            </div>
            <div class="attachmentitem"  v-if='uploadfile.pBankcardB'>
                <div><img :src="uploadfile.pBankcardB" alt=""></div>
                <div>银行卡反面</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pIdcardHander'>
                <div><img :src="uploadfile.pIdcardHander" alt=""></div>
                <div>手持身份证</div>
            </div>
            <div class="attachmentitem" v-if="uploadfile.pOutside">
                <div><img :src="uploadfile.pOutside" alt=""></div>
                <div>门头照</div>
            </div>
            <div class="attachmentitem" v-if="uploadfile.pInside">
                <div><img :src="uploadfile.pInside" alt=""></div>
                <div>内景照</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pLicense'>
                <div><img :src="uploadfile.pLicense" alt=""></div>
                <div>营业执照</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pOpenAccount'>
                <div><img :src="uploadfile.pOpenAccount" alt=""></div>
                <div>开户许可证照片</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pOrganization'>
                <div><img :src="uploadfile.pOrganization" alt=""></div>
                <div>组织机构代码证照片</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pTaxRegistration'>
                <div><img :src="uploadfile.pTaxRegistration" alt=""></div>
                <div>税务登记证照片</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pUnincorporated'>
                <div><img :src="uploadfile.pUnincorporated" alt=""></div>
                <div>入账非法人证明照片</div>
            </div>
             <div class="attachmentitem" v-if='uploadfile.otherPlatform'>
                <div><img :src="uploadfile.otherPlatform" alt=""></div>
                <div>第三方平台截图（绿洲）</div>
            </div>
             <div class="attachmentitem" v-if='uploadfile.aliMaterials'>
                <div><img :src="uploadfile.aliMaterials" alt=""></div>
                <div>支付宝支付物料照片</div>
            </div>
            <div class="attachmentitem" v-if='uploadfile.pOther'>
                <div><img :src="uploadfile.pOther" alt=""></div>
                <div>其他证明材料（选填）</div>
            </div>
        </div>
        <!-- 标签 -->
        <div class="title" v-if="ag1_admtag.length !== 0 || ag1_cwtag.length !== 0 || ag1_fwstag.length !== 0">
            <span>一级服务商标签</span>
        </div>
        <div class="container container1" v-if="ag1_admtag.length !== 0 || ag1_cwtag.length !== 0 || ag1_fwstag.length !== 0">
            <el-tag class="el_tag"
                v-for="item in ag1_admtag"
                :key="item.label"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in ag1_cwtag"
                :key="item.label"
                type="success"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in ag1_fwstag"
                :key="item.label"
                type="warning"
                effect="plain">
                {{ item.label }}
            </el-tag>
        </div>
        <div class="title" v-if="ag2_admtag.length !== 0 || ag2_cwtag.length !== 0 || ag2_fwstag.length !== 0">
            <span>二级服务商标签</span>
        </div>
        <div class="container container1" v-if="ag2_admtag.length !== 0 || ag2_cwtag.length !== 0 || ag2_fwstag.length !== 0">
            <el-tag class="el_tag"
                v-for="item in ag2_admtag"
                :key="item.label"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in ag2_cwtag"
                :key="item.label"
                 type="success"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in ag2_fwstag"
                :key="item.label"
                type="warning"
                effect="plain">
                {{ item.label }}
            </el-tag>
        </div>
        <div class="title" v-if="bd_admtag.length !== 0 || bd_cwtag.length !== 0 || bd_fwstag.length !== 0">
            <span>业态标签</span>
        </div>
        <div class="container container1" v-if="bd_admtag.length !== 0 || bd_cwtag.length !== 0 || bd_fwstag.length !== 0">
            <el-tag class="el_tag"
                v-for="item in bd_admtag"
                :key="item.label"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in bd_cwtag"
                :key="item.label"
                 type="success"
                effect="plain">
                {{ item.label }}
            </el-tag>
            <el-tag class="el_tag"
                v-for="item in bd_fwstag"
                :key="item.label"
                type="warning"
                effect="plain">
                {{ item.label }}
            </el-tag>
        </div>
        <!-- 审核 -->
        <div class="title">
            <span>审核</span>
            <div>
                <el-button icon="el-icon-refresh"></el-button>
            </div>
        </div>
        <div class="container container2">
            <div class="tipBox" v-if="merchantinfo.registryRemark">
                <span>进件备注：</span><span>{{merchantinfo.registryRemark}}</span>
            </div>
            <div class="radio">
                 <template>
                    <span class="margin"><span class="red">*</span>审核:</span>
                    <el-radio v-model="state" label="1">通过</el-radio>
                    <el-radio v-model="state" label="0">不通过</el-radio>
                </template>
            </div>
            <div class="note">
                 <span class="margin">备注:</span>
                 <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6}"
                placeholder="请输入内容"
                maxlength="100"
                v-model="note">
                </el-input>
            </div>
            <div class="btnBox">
                <el-button type="primary" @click="okBtn">审核</el-button>
                <!-- <el-button type="primary">关闭</el-button> -->
            </div>
        </div>

        <br />
        <br />
        <!-- 审核确定 -->
         <el-dialog v-dialogDrag title="审核确定" :visible.sync="visible" width="45%" :close-on-click-modal = "false">
            <div class="Box">
                <el-form label-position='left' :model="ruleForm" status-icon :rules="channer" label-width="160px" class="demo-ruleForm">
                    <!-- <el-form-item  label="提交进件通道" prop="channertype">
                        <el-radio-group v-model="channertype" @change="channertypes">
                            <el-radio :label="1">默认通道</el-radio>
                            <el-radio :label="2">其他(可多选)</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item  label="可选择通道" prop="channerlist">
                        <el-checkbox-group v-model="checkboxGroup5">
                            <el-checkbox v-for="(item,index) in channerlists" :key="index" :label="item.paytype" :value='item.paytype' border>{{item.channelname}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item> 
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="determine">确定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
import { merchantdetails, channel,uploadfileget,merchantreview,getRegistryChannnel,getMerchantHigherTags } from "@/api/api";
export default {
    data(){
        return {
            disabled: true,
            merchantinfo: "",
            state:"1",
            note:"",
            uploadfile:"",
            visible: false,
            channertype: 2,
            ruleForm:{},
            checkboxGroup5:[],
            channerlists:[],
              channer: {
                    channertype: [{required: true, message: '请选择进件通道',trigger: 'blur'}],
                    channerlist: [{required: true, message: '请选择进件通道',trigger: 'blur'}],
                    
                },
            ag1_admtag:[],//超管 运营标签
            ag1_cwtag:[],//财务标签
            ag1_fwstag:[],//服务商标签
            ag2_admtag:[],//超管 运营标签
            ag2_cwtag:[],//财务标签
            ag2_fwstag:[],//服务商标签
            bd_admtag:[],//超管 运营标签
            bd_cwtag:[],//财务标签
            bd_fwstag:[],//服务商标签
        }
    },
    created() {
        this.merchantinfo = JSON.parse(sessionStorage.getItem('auditinfo'))
        // console.log(this.merchantinfo)
        // this.uploadfileget()
        this.getRegistryChannnel()
        this.getMerchantHigherTags()//获取指定对象已拥有的标签
    },
     methods: {
         uploadfileget(){
            uploadfileget({},this.merchantinfo.uploadId).then(res => {
                // console.log(res);
                if (res.code == 405) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/login");
                    } else if (res.code == 200) {
                        this.uploadfile = res.data
                    }else{
                        this.$message.error(res.message);
                    }
                
            });
         },
         okBtn(){
            //  console.log(this.state)
             if(this.state == 0){
                 if(!this.note){
                     this.$message.error('请输入驳回原因');
                 }else{
                    merchantreview({
                        status:this.state,
                        reviewedReason: this.note
                    },this.merchantinfo.id).then(res => {
                        // console.log(res);
                        if (res.code == 405) {
                            sessionStorage.removeItem("token");
                            this.$router.push("/login");
                            } else if (res.code == 200) {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                this.$router.push({
                                    path: "/audit",
                                });
                               
                                this.$router.go(0);
                            }else{
                                this.$message.error(res.message);
                            }
                        
                    });
                 }
             }else{
                 this.visible = true;
                //  merchantreview({
                //         status:this.state,
                //         reviewedReason: this.note
                //     },this.merchantinfo.id).then(res => {
                //         console.log(res);
                //         if (res.code == 405) {
                //             sessionStorage.removeItem("token");
                //             this.$router.push("/login");
                //             } else if (res.code == 200) {
                //                 this.$message({
                //                     message: "成功",
                //                     type: "success"
                //                 });
                //                 this.$router.push({
                //                     path: "/audit",
                //                 });
                //             }else{
                //                 this.$message.error(res.message);
                //             }
                        
                //     });
             }
           
         },
         channertypes(val){
            //  console.log(val)
            if(val == 2){
                this.disabled = false;
            }else if(val == 1){
                this.disabled = true;
            }
         },
         determine(val){
            //  console.log(this.checkboxGroup5.toString())
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if(this.checkboxGroup5.toString()){
                  merchantreview({
                        status:this.state,
                        reviewedReason: this.note,
                        channelTypes: this.checkboxGroup5.toString()
                        },this.merchantinfo.id).then(res => {
                        // console.log(res);
                        if (res.code == 405) {
                            sessionStorage.removeItem("token");
                            this.$router.push("/login");
                            } else if (res.code == 200) {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                this.$router.push({
                                    path: "/audit",
                                });
                                this.$router.go(0);
                                loading.close();
                            }else{
                                loading.close();
                                this.$message.error(res.message);
                            }
                        
                    });
            }else{
                loading.close();
                this.$message.error('请选择通道');
            }
           
         },
        //  获取可选渠道
        getRegistryChannnel(){
             getRegistryChannnel({},this.merchantinfo.id).then(res => {
                // console.log(res);
                if (res.code == 405) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/login");
                    } else if (res.code == 200) {
                    //    console.log(res)
                    this.channerlists = res.data
                    }else{
                        this.$message.error(res.message);
                    }
                
            });
        },
        //获取指定对象已拥有的标签
        getMerchantHigherTags(){
            this.ag1_admtag = [],//超管 运营标签
            this.ag1_cwtag = [],//财务标签
            this.ag1_fwstag = [],//服务商标签
            this.ag2_admtag = [],//超管 运营标签
            this.ag2_cwtag = [],//财务标签
            this.ag2_fwstag = [],//服务商标签
            this.bd_admtag = [],//超管 运营标签
            this.bd_cwtag = [],//财务标签
            this.bd_fwstag = [],//服务商标签
            getMerchantHigherTags({
                bdId: this.merchantinfo.bdId,
                agent1Id: this.merchantinfo.agent1Id,
                agent2Id: this.merchantinfo.agent2Id
            }).then(res => {
                if (res.code == 405) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/login");
                } else if(res.code == 200){
                    // console.log(res)
                    for(var i = 0; i < res.data.agent1Tags.length; i++){
                        if(res.data.agent1Tags[i].creatorRole == 1 ||res.data.agent1Tags[i].creatorRole == 8){
                            this.ag1_admtag.push({key:res.data.agent1Tags[i].tagId,label:res.data.agent1Tags[i].tagName})
                        }else if(res.data.agent1Tags[i].creatorRole == 9){
                            this.ag1_cwtag.push({key:res.data.agent1Tags[i].tagId,label:res.data.agent1Tags[i].tagName})
                        }else if(res.data.agent1Tags[i].creatorRole == 2){
                            this.ag1_fwstag.push({key:res.data.agent1Tags[i].tagId,label:res.data.agent1Tags[i].tagName})
                        }
                    }
                    for(var i = 0; i < res.data.agent2Tags.length; i++){
                        if(res.data.agent2Tags[i].creatorRole == 1 ||res.data.agent2Tags[i].creatorRole == 8){
                            this.ag2_admtag.push({key:res.data.agent2Tags[i].tagId,label:res.data.agent2Tags[i].tagName})
                        }else if(res.data.agent2Tags[i].creatorRole == 9){
                            this.ag2_cwtag.push({key:res.data.agent2Tags[i].tagId,label:res.data.agent2Tags[i].tagName})
                        }else if(res.data.agent2Tags[i].creatorRole == 2){
                            this.ag2_fwstag.push({key:res.data.agent2Tags[i].tagId,label:res.data.agent2Tags[i].tagName})
                        }
                    }
                    for(var i = 0; i < res.data.bdTags.length; i++){
                        if(res.data.bdTags[i].creatorRole == 1 ||res.data.bdTags[i].creatorRole == 8){
                            this.bd_admtag.push({key:res.data.bdTags[i].tagId,label:res.data.bdTags[i].tagName})
                        }else if(res.data.bdTags[i].creatorRole == 9){
                            this.bd_cwtag.push({key:res.data.bdTags[i].tagId,label:res.data.bdTags[i].tagName})
                        }else if(res.data.bdTags[i].creatorRole == 2){
                            this.bd_fwstag.push({key:res.data.bdTags[i].tagId,label:res.data.bdTags[i].tagName})
                        }
                    }
                    // console.log(this.ag2_admtag)
                    // console.log(this.ag2_cwtag)
                    // console.log(this.ag2_fwstag)
                }else if(res.code == 500){
                    this.$message.error(res.message);   
                }
            })
        },
     
    },
    watch: {
        
    }

}
</script>

<style scoped lang="less">
    .title{
        background: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }
    .container1{
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .container1 .itemBox{
        width: 33%;
    }
    .container1 .itemBox .line{
        width: 100%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
    }
    .container1 .itemBox .line div:nth-child(1){
        width: 20%;
        text-align: left
    }
    .container1 .itemBox .line div:nth-child(2){
        width: 80%;
        text-align: left;
        color: #888888;
    }
    .container1{
         width: 100%;
        display: flex;
        margin-bottom: 20px;
        box-sizing: border-box;
        flex-wrap: wrap;
        .attachmentitem{
            width: 16.5%;
            text-align: center;
            margin-bottom: 20px;
            div{
                font-size: 14px;
                padding: 20px;
                box-sizing:border-box;
                &:nth-child(1){
                    margin-bottom: 5px;
                }
                img{
                    width:100%;
                    height: 200px;
                }
            }
        }
       
    }
   .red{
       color: red;
   }
    .container2{
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box;
         .radio{
            font-size: 14px;
            display: flex;
            justify-content: left;
            align-items: center;
            .margin{
                margin-right: 15px;
            }
        }
        .note{
            width: 30%;
            display: flex;
            margin-top: 20px;
            box-sizing: border-box;
            span{
                width: 15%;
            }
        }
        .btnBox{
            margin-top: 20px;
            margin-left: 4%;
        }
        .tipBox{
            width: 100%;
            background: rgba(229, 28, 35,0.1);
            color: #101010;
            padding: 10px 20px;
            box-sizing: border-box;
            font-size: 14px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
    }
    .el-checkbox.is-bordered+.el-checkbox.is-bordered{
        margin-left: 0;
        margin-top: 10px;
    }
    .el_tag{
        margin-right: 10px;
        margin-bottom: 5px;
    }
    
   
</style>
